<template>

  <div class="app-container">
    <el-row :gutter="20">
      <el-card>
      <el-form ref="searchform" :model="searchformdata" :rules="rules" size="mini" label-width="100px"
               label-position="left">
        <el-row gutter="15">
          <el-col :span="12">
            <el-form-item label="上传日期" prop="startTime_s">
              <el-date-picker
                v-model="searchformdata.startTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计算完毕日期" prop="endTime_s">
              <el-date-picker
                v-model="searchformdata.endTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="按被试名搜索" prop="subname">
              <el-input v-model="searchformdata.subname" placeholder="请输入被试名" clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">搜索</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      </el-card>
    </el-row>
    <el-row :gutter="20">
    </el-row>
    <el-row :gutter="20">
      <el-col :span="14">
        <el-card>
          <el-button
            type="primary"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handledownloadlist"
          >下载</el-button>
          <el-table :data="userList" border stripe @selection-change="handleSelectionChange" @sort-change="handleSortChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="被试名" prop="subname"></el-table-column>
            <el-table-column label="上传时间" prop="startTime" sortable="custom"></el-table-column>
            <el-table-column label="运算结束时间" prop="endTime" sortable="custom"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-download"
                  @click="download(scope.row)"
                >下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>


  </div>




</template>

<script>
import axios from "axios";
import Vue from 'vue';
import {
  download, downloadlist, downloadlistbysearch, downloadreportlist
} from '@/api/ibrain/ibrain'


export default {
  created() {
    this.getdownlist();
  },
  watch: {
  },
  data() {
    return {
      userList: [],
      ids: [],
      searchformdata: {
        startTime: null,
        endTime: null,
        subname: undefined,
      },
      rules: {
        startTime: [],
        endTime: [],
        subname: [],
      },
      sortKey: '', // 当前排序的属性
      sortOrder: '' // 当前排序的顺序
    }
  },
  methods: {
    handleSortChange({ prop, order }) {
      this.sortKey = prop;
      this.sortOrder = order;
      if (prop === 'startTime' || prop === 'endTime') {
        this.userList.sort((a, b) => {
          const dateA = new Date(a[prop]).getTime();
          const dateB = new Date(b[prop]).getTime();
          return order === 'ascending' ? dateA - dateB : dateB - dateA;
        });
      }
    },
    submitForm() {
      this.$refs['searchform'].validate(valid => {
        if (!valid) return
        downloadlistbysearch(this.searchformdata).then(res=>{
          this.userList = res.userList;
        })
      })
    },
    resetForm() {
      this.$refs['searchform'].resetFields()
      this.getdownlist();
    },


    getdownlist(){
      downloadlist().then(res=>{
        this.userList = res.userList;
      })
    },
    download: function (row) {
      console.log(row)
      let taskid = row.taskid
      let name = row.subname
      download({ taskid ,name}).then(res=>{
        const url = window.URL.createObjectURL(new Blob([res]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', name+"_report.docx");
        document.body.appendChild(link);
        link.click();
      })
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      console.log(this.ids)
    },
    handledownloadlist() {
      if (this.ids.length === 0) {
        this.$alert('请选择至少一个被试', '', {
          confirmButtonText: '确定',
        });
      } else {
        // 显示全局loading界面
        const downloading = this.downloading();

        let p = { ids: this.ids };
        downloadreportlist(p).then((res) => {
          const url = window.URL.createObjectURL(new Blob([res]));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', 'report.zip');
          document.body.appendChild(link);
          link.click();

          downloading.close();
        }).catch(() => {
          // 处理下载失败的情况，也要隐藏loading界面
          downloading.close();
        });
      }
    },
    downloading(){
      const loading = this.$loading({
        lock: true,
        fullScreen: true,
        text: "下载中",
        spinner:"el-icon-loading",
        background: "rgba(0,0,0,0.8)"
      })
      return loading;
    },
  }
}

</script>

<style>

</style>
